<template>
  <header class="border-box border-box">
    <div class="w-100 h-100 d-flex align-items-center justify-content-center">
      <slot></slot>
    </div>
    <div class="flex-label right-content d-flex align-items-center pb-1">
      <div class="text-lg mr-5">{{ time }}</div>
      <div class="d-flex align-items-center text-md" >
        <svg t="1636380494993"
             class="icon"
             viewBox="0 0 1024 1024"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="10082"
             width="2.1rem"
             height="2.1rem">
          <path d="M502.784 428.544a31.744 31.744 0 0 0 32.256-31.232V208.384a32.256 32.256 0 0 0-65.024 0v188.416a31.744 31.744 0 0 0 32.768 31.744z"
                fill="#ffffff"
                p-id="10083"></path>
          <path d="M693.248 256a33.28 33.28 0 0 0-45.056 7.68 30.72 30.72 0 0 0 8.192 43.52 259.584 259.584 0 0 1 116.736 215.04 266.24 266.24 0 0 1-269.824 261.632 266.24 266.24 0 0 1-270.336-261.632A259.584 259.584 0 0 1 349.696 307.2 30.72 30.72 0 0 0 358.4 264.192a32.768 32.768 0 0 0-27.648-13.312 33.28 33.28 0 0 0-17.92 5.12 321.536 321.536 0 0 0-144.384 266.24 330.24 330.24 0 0 0 334.848 324.096 330.24 330.24 0 0 0 334.848-324.096A321.536 321.536 0 0 0 693.248 256z"
                fill="#ffffff"
                p-id="10084"></path>
        </svg>
        退出登录
      </div>
    </div>
    <div class="bottom-box">
      <Item>
        <div class="d-flex align-items-center mb-3 text-md">
          <div class="d-flex justify-content-center align-items-center w-25">
            <svg t="1641630776813"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3073"
                width="2rem"
                height="2rem">
              <path d="M511.05216365 1016.09095932c-162.58026082 0-294.85608758-132.27582678-294.8560876-294.85608761 0-92.65100208 44.41666396-181.01041183 118.82181654-236.40618008 15.87625868-11.82162545 38.41370053-8.55685585 50.28798352 7.37206039 11.84795422 15.92891623 8.55685585 38.44002926-7.37206044 50.28798353-56.26461818 41.88910041-89.86015061 108.71156226-89.86015064 178.71980737 0 122.92910734 100.02306249 222.95216981 222.95216984 222.95216979 122.92910734 0 222.95216981-100.02306249 222.95216984-222.95216979 0-70.13988901-33.67451879-136.93602208-90.04445218-178.66714979-15.95524502-11.82162545-19.32532979-34.33273846-7.50370434-50.28798352 11.82162545-15.9815738 34.35906727-19.299001 50.2879835-7.50370434 74.64211166 55.23779551 119.19041953 143.62353406 119.19041954 236.45883765 0 162.6065896-132.24949801 294.88241639-294.85608758 294.8824164z"
                    fill="#ffffff"
                    p-id="3074"></path>
              <path d="M665.33885655 549.62383687c-19.85190553 0-35.96512331-16.08688894-35.96512331-35.96512328V195.92290994c0-31.41024309-12.40085876-61.13544381-34.93830059-83.67288566-22.35314029-22.35314029-51.97302589-34.6750127-83.383269-34.67501271-65.40070735 0-118.61118624 53.07883495-118.61118621 118.32156955v317.76213247c0 19.85190553-16.08688894 35.96512331-35.96512329 35.96512328-19.85190553 0-35.96512331-16.08688894-35.9651233-35.96512328V195.92290994c0-104.89388814 85.46324317-190.22548738 190.51510402-190.22548736 50.63025776 0 98.31169131 19.79924798 134.22415703 55.73804248 36.12309602 36.12309602 56.0013303 83.88351596 56.00133034 134.51377365v317.76213246c0.02632879 19.82557674-16.0605602 35.91246574-35.91246569 35.9124657z"
                    fill="#ffffff"
                    p-id="3075"></path>
              <path d="M519.24041649 716.78530666m-86.35842194 0a86.35842196 86.35842196 0 1 0 172.71684385 0 86.35842196 86.35842196 0 1 0-172.71684385 0Z"
                    fill="#ffffff"
                    p-id="3076"></path>
              <path d="M646.56643124 449.12685623h-153.15455495c-19.85190553 0-35.96512331-16.08688894-35.96512331-35.9651233s16.08688894-35.96512331 35.96512331-35.96512327h153.15455495c19.85190553 0 35.96512331 16.08688894 35.9651233 35.96512327s-16.11321775 35.96512331-35.9651233 35.9651233zM646.56643124 279.35883649h-153.15455495c-19.85190553 0-35.96512331-16.08688894-35.96512331-35.96512328 0-19.85190553 16.08688894-35.96512331 35.96512331-35.96512326h153.15455495c19.85190553 0 35.96512331 16.08688894 35.9651233 35.96512326-0.02632879 19.8782343-16.11321775 35.96512331-35.9651233 35.96512328z"
                    fill="#ffffff"
                    p-id="3077"></path>
            </svg>
            <div class="mx-1">{{ tianqi.wendu || '温度' }}℃</div>
          </div>
          <div class="d-flex justify-content-center align-items-center w-25">
            <svg t="1641630594664"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2133"
                width="2rem"
                height="2rem">
              <path d="M738.844 841.58c-113.108 0-204.8-91.692-204.8-204.8 0-163.161 143.268-310.37 190.135-354.163 0.137 0.137 0.289 0.259 0.431 0.393a19.936 19.936 0 0 1 29.2-0.292C800.981 326.287 943.644 471.7 943.644 636.78c0 113.108-91.692 204.8-204.8 204.8z m14.076-476.424c-0.021 0.02-0.044 0.036-0.065 0.056a16.955 16.955 0 0 0-27.02 0c-0.15-0.138-0.311-0.264-0.457-0.406C689.331 404.651 593.349 521.52 593.349 636.2c0 80.244 65.141 145.294 145.5 145.294S884.344 716.443 884.344 636.2c0-116.98-94.925-231.377-131.424-271.044z m5.424 367.344h-4a110 110 0 0 1-105.54-141h0.471a29.5 29.5 0 0 1 57.069 10.5c0 2.724-2 9.086-2 20.5a50 50 0 0 0 50 50c1.348 0 2.679-0.069 4-0.174v0.174a30 30 0 0 1 0 60z m-358 43a140.354 140.354 0 0 0 29-3.033v0.184c0.987-0.1 1.987-0.151 3-0.151a29.984 29.984 0 0 1 4 59.7v0.059a201.146 201.146 0 0 1-36 3.241c-110.457 0-200-89.543-200-200a200.472 200.472 0 0 1 5.225-45.528 29.982 29.982 0 1 1 59.325 8.528h0.4a140.077 140.077 0 0 0 135.05 177z m173-443a29.95 29.95 0 0 1-25.286-13.9c-0.121 0.157-0.255 0.3-0.368 0.466-51.356-75.812-106.381-131.477-132.256-156.466-0.14 0.161-0.3-0.695-0.445-0.538a17.964 17.964 0 0 0-29.292 0c-0.088-0.095-0.187-0.18-0.274-0.278C330.176 216.364 140.344 419.6 140.344 635.5c0 143.594 116.406 260 260 260a258.778 258.778 0 0 0 147.6-45.952 29.972 29.972 0 1 1 38.88 45.552c0.069 0.094 0.131 0.193 0.2 0.285a318.466 318.466 0 0 1-186.68 60.115c-176.731 0-320-143.269-320-320 0-264.941 241.8-503 305.017-560.713 0.08 0.078 0.169 0.145 0.249 0.222a19.931 19.931 0 0 1 28.46-1.029c0.085-0.093 0.181-0.177 0.265-0.272 31.707 28.469 111.748 104.84 182.017 209.046l-0.22 0.266a29.977 29.977 0 0 1-22.788 49.48z"
                    fill="#ffffff"
                    p-id="2134"></path>
            </svg>
            <div class="mx-1">{{ tianqi.shidu || '湿度' }}</div>
          </div>
          <div class="d-flex justify-content-center align-items-center w-25">
            <svg t="1642338137821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2200" width="2rem" height="2rem"><path d="M34.382267 634.56594a34.381275 34.381275 0 1 0 34.381275 34.381275 34.381275 34.381275 0 0 0-34.381275-34.381275zM34.382267 454.725424a34.381275 34.381275 0 1 0 34.381275 34.381275 34.381275 34.381275 0 0 0-34.381275-34.381275zM171.742073 343.647458H376.872662A171.741082 171.741082 0 1 0 198.354503 170.25343v0.826473a34.381275 34.381275 0 0 0 68.597256 0 103.143826 103.143826 0 1 1 102.978531 103.143826h-198.353511a34.381275 34.381275 0 0 0 0 68.76255zM34.382267 274.884907a34.381275 34.381275 0 1 0 34.381275 34.381275 34.381275 34.381275 0 0 0-34.381275-34.381275zM649.443445 634.896529h-477.701372a34.381275 34.381275 0 0 0 0 68.762551h467.453108a125.954479 125.954479 0 1 1-125.95448 125.954479 34.381275 34.381275 0 0 0-68.597256 0v0.991768A194.71703 194.71703 0 1 0 649.60874 634.731235z" p-id="2201" fill="#ffffff"></path><path d="M794.902687 66.117837a229.098305 229.098305 0 0 0-226.949476 198.353511 31.240678 31.240678 0 0 0-0.991767 7.768846v0.991767a34.381275 34.381275 0 0 0 68.597256 0 160.335755 160.335755 0 1 1 158.848103 181.824052H171.742073a34.381275 34.381275 0 0 0 0 68.76255h624.317676A229.098305 229.098305 0 0 0 794.902687 66.117837z" p-id="2202" fill="#ffffff"></path></svg>
            <div class="mx-1">{{ tianqi.fengxiang || '风向' }}</div>
          </div>
          <div class="d-flex justify-content-center align-items-center w-25">
            <svg t="1641630821306"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3507"
                width="2rem"
                height="2rem">
              <path d="M719.3 657.2c-21.2-7.5-44.8 1.9-55 22-55 109.2-173.7 180.2-307.1 180.2-34.2 0-67.5-4.6-99.5-13.7-22-6.2-45.1 4.8-53.8 25.9l-0.3 0.7c-10.1 24.7 3.6 52.6 29.3 59.9 40.1 11.4 81.7 17.2 124.3 17.2 91.7 0 179.2-26.8 253-77.4 35.7-24.5 67-53.9 93.2-87.4 15.9-20.4 29.7-42.1 41.2-64.8 12.3-24.1 0.4-53.6-25.3-62.6z"
                    p-id="3508"
                    fill="#ffffff"></path>
              <path d="M898 310c-35.1-39.8-81.4-67.7-132.5-80.1-44.4-91.8-141.9-151.7-250.7-151.7-60 0-117.1 17.9-165 51.7-39.6 28-70.8 66-89.7 108.9-51.3 15.3-97.4 44.5-131.9 83.9-41.1 47-63.8 106.5-63.8 167.6 0 36 7.6 70.9 22.5 103.7 14.3 31.5 34.7 59.7 60.6 83.8 52.7 49.1 122.6 76.1 196.7 76.1 53.4 0 104.9-14.1 149.2-40.5 24.4-14.5 29.5-47.6 10.6-68.7-14.3-16-37.9-19.8-56.4-8.8-30.5 18.2-66.2 28-103.4 28-104.7 0-189.8-77.9-189.8-173.6 0-80.7 62.4-151.9 148.3-169.4 16-3.3 28.9-14.9 33.9-30.4 22.9-71.9 96.2-122.1 178.1-122.1 80.3 0 151.2 46.9 176.3 116.6 5.7 15.7 19.6 27 36.2 29.3 82.6 11.4 144.9 82.6 144.9 165.6 0 40.1-14.1 78-39.6 107.8-13.7 16.1-14 39.6-1.1 56.3 17.5 22.7 51.5 23.4 70 1.5 13.1-15.4 24.3-32.4 33.4-50.3 18.1-36 27.3-74.8 27.3-115.3 0.1-62.7-22.7-123-64.1-169.9z"
                    p-id="3509"
                    fill="#ffffff"></path>
            </svg>
            <div class="mx-1">{{ tianqi.fengxiang || '风力' }}</div>
          </div>
        </div>
        <div class="d-flex align-items-center text-md">
          <div class="d-flex justify-content-center align-items-center w-25">
            <svg t="1642338359112" class="icon" viewBox="0 0 1053 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2582" width="2rem" height="2rem"><path d="M1021.28 456.8a32 32 0 0 0-32 32A471.68 471.68 0 0 1 518.08 960a32 32 0 0 0 0 64 535.84 535.84 0 0 0 535.2-535.2 32 32 0 0 0-32-32z" p-id="2583" fill="#ffffff"></path><path d="M518.08 802.08a32 32 0 0 0 0 64 375.84 375.84 0 0 0 375.2-375.36 32 32 0 0 0-64 0 311.68 311.68 0 0 1-311.2 311.36z" p-id="2584" fill="#ffffff"></path><path d="M734.56 480.96A245.76 245.76 0 1 0 488.8 724.8a245.6 245.6 0 0 0 245.76-243.84z m-427.52 0A181.76 181.76 0 1 1 488.8 660.8a181.12 181.12 0 0 1-181.76-179.84zM700.16 297.28a32 32 0 0 0 22.4-9.12l102.88-101.28a32 32 0 1 0-44.8-45.6l-103.04 101.28a32 32 0 0 0 22.56 54.72zM247.04 288.96a32 32 0 1 0 44.8-45.6l-102.88-101.12A32 32 0 1 0 144 187.84zM475.52 206.4a32 32 0 0 0 32-32V32a32 32 0 0 0-64 0v142.4a32 32 0 0 0 32 32zM214.08 660.16l-103.04 101.12a32 32 0 0 0 44.96 45.76l102.88-101.12a32 32 0 0 0-44.8-45.76z" p-id="2585" fill="#ffffff"></path><path d="M208 467.68a32 32 0 0 0-32-32H32a32 32 0 0 0 0 64h144a32 32 0 0 0 32-32z" p-id="2586" fill="#ffffff"></path></svg>
            <div class="mx-1">{{ tianqi.wendu || '光照' }}℃</div>
          </div>
          <div class="d-flex justify-content-center align-items-center w-25">
            <svg t="1642338418434" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3266" width="2rem" height="2rem"><path d="M325.290667 299.008L235.178667 121.173333c-11.605333-22.869333-49.152-22.869333-61.098667 0L84.309333 299.008c-29.013333 57.685333-18.090667 129.365333 27.306667 174.08C137.898667 499.029333 171.349333 512 204.8 512s66.901333-12.970667 93.184-38.912c45.056-44.714667 56.32-116.394667 27.306667-174.08z m-75.434667 125.610667c-25.6 25.6-64.512 25.6-90.453333 0-23.893333-23.893333-30.037333-63.488-14.336-94.549334L204.8 212.309333l59.392 117.76c15.701333 31.061333 9.898667 70.656-14.336 94.549334zM955.733333 238.933333V170.666667h-68.266666V68.266667h-68.266667v887.466666h136.533333v-68.266666h-68.266666v-170.666667h68.266666v-68.266667h-68.266666v-170.666666h68.266666v-68.266667h-68.266666V238.933333h68.266666z m-413.696 18.090667c-11.946667-22.186667-48.469333-22.186667-60.416 0l-179.882666 337.92c-52.565333 98.645333-32.768 220.501333 48.128 296.277333 45.397333 42.666667 103.424 63.829333 161.792 63.829334s116.394667-21.504 161.792-63.829334c80.896-75.776 100.693333-197.632 48.128-296.277333l-179.541334-337.92z m84.992 584.362667a166.6048 166.6048 0 0 1-230.058666 0c-58.368-54.954667-72.704-143.018667-34.816-214.357334L512 345.770667l149.504 281.258666c38.229333 71.338667 23.893333 159.744-34.474667 214.357334z" p-id="3267" fill="#ffffff"></path></svg>
            <div class="mx-1">{{ tianqi.shidu || '雨量' }}</div>
          </div>
          <div class="d-flex justify-content-center align-items-center w-25">
            <svg t="1642338383127" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2829" width="2rem" height="2rem"><path d="M912.9 834.1H112.6c-24.9 0-45 20.1-45 45s20.1 45 45 45h800.3c24.9 0 45-20.1 45-45 0-24.8-20.1-45-45-45zM459.3 746.8c30.5 30.5 79.9 30.5 110.4 0l78.4-78.4c17.6-17.6 17.6-46.1 0-63.6-17.6-17.6-46.1-17.6-63.6 0l-24.4 24.4v-484c0-24.9-20.1-45-45-45s-45 20.1-45 45v485.1l-27.7-27.7c-17.6-17.6-46.1-17.6-63.6 0-17.6 17.6-17.6 46.1 0 63.6l80.5 80.6zM155 706.7c18.5 18.5 46.7 23.5 70.5 12.5 22-10.2 36.1-32.3 36.1-56.6V145.1c0-24.9-20.1-45-45-45s-45 20.1-45 45v451l-26-26c-17.6-17.6-46.1-17.6-63.6 0-17.6 17.6-17.6 46.1 0 63.6l73 73zM798.5 719.2c23.8 11.1 51.9 6.1 70.5-12.5l73.1-73.1c17.6-17.6 17.6-46.1 0-63.6-17.6-17.6-46.1-17.6-63.6 0l-26 26V145c0-24.9-20.1-45-45-45s-45 20.1-45 45v517.5c-0.2 24.4 13.9 46.5 36 56.7z" p-id="2830" fill="#ffffff"></path></svg>
            <div class="mx-1">{{ tianqi.fengxiang || '大气压' }}</div>
          </div>
        </div>
      </Item>
    </div>
  </header>
</template>

<script>

export default {

  data () {
    return {
      time: '--',
      timer: '',
      tianqi: {}
    }
  },

  created () {
    this.setTime();
  },
  methods: {
    setTime () {
      this.time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
      if (!this.timer) this.timer = setInterval(this.setTime, 1000);
    }
  }
}
</script>

<style lang="less" scoped>
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 7rem;
  background: url("~@/assets/img/head.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .right-content {
    position: absolute;
    height: 7rem;
    right: 0;
    top: -0.2rem;
    padding-right: 5rem;
    line-height: 2rem;
  }
  .left-content {
    position: absolute;
    left: 1rem;
    top: 1.5rem;
    line-height: 2rem;
  }
  .bottom-box {
    position: absolute;
    top: 6.6rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(50% - 5rem);
  }
}
</style>
